/*
 * @Author: hongbin
 * @Date: 2022-04-25 20:11:46
 * @LastEditors: hongbin
 * @LastEditTime: 2022-05-01 11:31:40
 * @Description:主页
 */
import { FC, ReactElement, useEffect, useState } from "react";
import styled from "styled-components";
import RuYiTitle from "../../components/RuYiTitle";
import Footer from "../../components/Footer";
import IntroduceComponent from "../../components/IntroduceComponent";
import Wave from "../../components/Wave";

interface IProps {}

const scrollHeight = window.innerHeight * 2;

const Home: FC<IProps> = (): ReactElement => {
  const [scrollY, setScrollY] = useState(window.scrollY);

  useEffect(() => {
    const scroll = () => {
      //   console.log(window.scrollY);
      setScrollY(window.scrollY);
    };
    document.addEventListener("scroll", scroll);
    return () => {
      document.removeEventListener("scroll", scroll);
    };
  }, []);

  const firstPercent = scrollY / scrollHeight;
  const secondPercent = ((scrollY - scrollHeight) / scrollHeight) * 2;
  const threePercent = (scrollY - scrollHeight * 1.5) / scrollHeight;

  return (
    <Container>
      <Wrap style={{ position: "relative", height: "300vh" }}>
        {firstPercent < 1.05 ? <RuYiTitle percent={firstPercent} /> : <></>}
      </Wrap>
      <Wrap style={{ height: "70vh" }}>
        {secondPercent > 0 && secondPercent < 1.5 ? (
          <IntroduceComponent secondPercent={secondPercent} />
        ) : null}
      </Wrap>
      <Wrap style={{ height: "100vh" }}>
        {threePercent > 0 && threePercent < 0.9 ? (
          <Wave threePercent={threePercent} />
        ) : null}
      </Wrap>
      <Wrap>{threePercent > 0.7 ? <Footer /> : null}</Wrap>
    </Container>
  );
};

export default Home;

const Wrap = styled.div`
  height: 120vh;
  width: 100vw;
  overflow: hidden;
`;

const Container = styled.div`
  width: 100vw;
  background: ${(props) => props.theme.primary};
`;
